<template>
  <a-form :form="form">
    <a-row :gutter="8">
      <a-col :md="info ? 24 : 24" :sm="12" class="col-wrapper">
        <a-col :md="md" :sm="12">
          <a-form-item
            label="学号"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
            
          >
            <a-input v-if="!info.xh" v-decorator="[
              'xh',
              {
                rules: [{ required: true, message: '请填写正确的学号!', pattern: /^[0-9]*$/ }],
              }
            ]" />
            <a-input v-else disabled v-decorator="[ 'xh' ]"/>
            <a-input v-decorator="['id']" type="hidden"/>
            <a-input v-decorator="['communityId']" type="hidden"/>
            <a-input v-decorator="['state']" type="hidden"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="姓名"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['xm',
              {
                rules: [{ required: true, message: '请填写姓名,输入类型为中文、英文!', pattern: /^[\u4e00-\u9fa5A-Za-z]+$/}],
              }
            ]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="性别"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['xbm', {rules: [{ required: true, message: '请选择性别!' }]}]">
              <a-select-option v-for="i in TYPE0011" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="年级"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['sznj', {rules: [{ required: true, message: '请选择年级!' }]}]">
              <a-select-option v-for="i in TYPE0126" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="入学时间"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-date-picker v-decorator="['rxny', {rules: [{ required: true, message: '请填写入学时间!' }]}]" style="width: 100%" format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="院系"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select allowClear v-decorator="['ssyxm', {rules: [{ required: true, message: '请选择院系!' }]}]" @change="yxChange" showSearch :filterOption="filterOption">
                  <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh }}-{{ i.dwmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="专业"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select allowClear v-decorator="['sszym', {rules: [{ required: true, message: '请选择专业!' }]}]" showSearch :filterOption="filterOption">
                <a-select-option v-for="i in selectMenu.zy" :key="i.id" :value="i.zyh">{{ i.zyh}} {{ i.zymc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :md="md" :sm="12">
          <a-form-item
            label="学科专业码"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="[
                  'xkm',
                  {
                    rules: [{ required: true, message: '请输入学科专业码!' }],
                  }
                ]"/>
          </a-form-item>
        </a-col> -->
        <a-col :md="md" :sm="12">
          <a-form-item
            label="证件类型"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" @change="zjlxChang"  v-decorator="['sfzjlxm', {rules: [{ required: true, message: '请选择证件类型!' }]}]">
              <a-select-option v-for="i in TYPE0088" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="证件号码"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input @change="zjhmChange" v-decorator="['zjhm', {rules: [{ required: true, message: '请填写正确的证件号码!', 
            pattern: pattern}]}]"/>
          </a-form-item>
        </a-col>
        <!-- <a-col :md="md" :sm="12">
          <a-form-item
            label="血型"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['xxm']">
              <a-select-option v-for="i in TYPE0078" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :md="md" :sm="12">
          <a-form-item
            label="出生日期"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-date-picker v-decorator="['csrq', {rules: [{ required: true, message: '请填写出生日期!' }]}]" style="width: 100%" format="YYYY-MM-DD"/>
          </a-form-item>
        </a-col>
       <a-col :md="md" :sm="12">
          <a-form-item
            label="政治面貌"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" @change="zzmmChange" v-decorator="['zzmmm', {rules: [{ required: false, message: '请填写政治面貌' }]}]">
              <a-select-option v-for="i in TYPE0020" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="联系电话"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['lxdh', {rules: [{ required: true, message: '请填写正确的联系电话!',
              pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/ }]
            }]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="电子邮箱"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['dzxx', {rules: [{ required: true, message: '请填写正确的电子邮箱!', pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="国内联系人"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['gnlxr', {rules: [{ required: true, message: '请填写国内联系人!' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="联系人电话"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['gnlxrdh', {rules: [{ required: true, message: '请填写正确的联系人电话!',
            pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/ }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="留学国别"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-select :allowClear="true" v-decorator="['lxgbm', {rules: [{ required: true, message: '请选择留学国别!' }]}]" showSearch :filterOption="filterOption">
              <a-select-option v-for="i in TYPE0015" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="国外留学高校及院系"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['lxgxyx', {rules: [{ required: true, message: '请填写国外留学高校及院系!' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="学习期限"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input addon-after="年" v-decorator="['lxxxqx', {rules: [{ required: true, message: '请填写大于0的数字',pattern:  /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/ }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="拟毕业时间"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-date-picker v-decorator="['nbysj', {rules: [{ required: true, message: '请填写拟毕业时间!' }]}]" style="width: 100%" format="YYYY-MM-DD" @change="dateChang"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="校内住宿地址"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['xnzsdz', {rules: [{ required: false, message: '请填写校内住宿地址!' }]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="md" :sm="12">
          <a-form-item
            label="海外住址"
            :labelCol="{span: 6,offset: 1}"
            :wrapperCol="{span: 16, offset: 1}"
            selfUpdate
          >
            <a-input v-decorator="['hwzz', {rules: [{ required: false, message: '请填写海外住址!' }]}]"/>
          </a-form-item>
        </a-col>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
import { mapState } from 'vuex'
import moment from 'moment'
const selectArr = ['TYPE0011', 'TYPE0088', 'TYPE0078', 'TYPE0017', 'TYPE0503', 'TYPE0037', 'TYPE0013', 'TYPE0012', 'TYPE0002', 'TYPE0015', 'TYPE0020', 'TYPE0001', 'TYPE0305','TYPE0126']
export default {
  props: ['info'],
  data () {
    return {
      md: (12),
      uploadUrl:`${process.env.SERVICE_URL}upload/img`,
      selectMenu: {},
      loading: false,
      pattern: RegExp(/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  computed: {
    ...mapState({
      TYPE0305: state => state.app['TYPE0305'], // 学习方式
      TYPE0001: state => state.app['TYPE0001'], // 信仰宗教
      TYPE0020: state => state.app['TYPE0020'], // 政治面貌
      TYPE0015: state => state.app['TYPE0015'], // 国籍/地区
      TYPE0002: state => state.app['TYPE0002'], // 户口性质
      TYPE0012: state => state.app['TYPE0012'], // 婚姻状况
      TYPE0013: state => state.app['TYPE0013'], // 健康状况
      TYPE0037: state => state.app['TYPE0037'], // 港澳台侨
      TYPE0503: state => state.app['TYPE0503'], // 培养来源
      TYPE0017: state => state.app['TYPE0017'], // 民族
      TYPE0078: state => state.app['TYPE0078'], // 血型
      TYPE0088: state => state.app['TYPE0088'], // 证件类型
      TYPE0011: state => state.app['TYPE0011'], // 性别
      TYPE0126: state => state.app['TYPE0126'] // 年级
      
    })
  },
  watch: {
    info (val) {
      if (val.xh) {
        this.initForm()
      }
    }
  },
  created () {
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.initSelectMenu()
  },
  methods: {
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    initForm () {
      this.$nextTick(() => {
        if (this.info.csdsdm) {
          this.provinceChange(this.info.csdsdm)
        }
        if (this.info.csdcdm) {
          this.cityChange(this.info.csdcdm)
        }
        if (this.info.jgsdm) {
          this.provinceNativeChange(this.info.jgsdm)
        }
        if (this.info.jgcdm) {
          this.cityNativeChange(this.info.jgcdm)
        }
        let keys = Object.keys(this.form.getFieldsValue())
        let obj = {}
        keys.forEach(key => {
          obj[key] = this.info[key]
        })
        console.log(obj)
        this.form.setFieldsValue(obj)
        // this.yxChange(obj.ssyxm)
        this.yxChange(this.info.ssyxm,1)

      })
    },
    initSelectMenu () {
      let allRequest = [
        this.$api.base.areaList(),
        this.$api.base.collegeAll(),
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          province: res[0].data,
          yx: res[1].data
        }

      })

    },
    yxChange (code,v) {
      console.log(code)
      // this.$set(this.queryParam, 'zy', '')
      if(v != 1){
        this.form.setFieldsValue({sszym: ''})
      }
      if (code) {
        this.$api.base.majorAll({lsdwh: code}).then(res => {
          this.$set(this.selectMenu, 'zy', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'zy', [])
      }
    },
    provinceChange (v) {
      this.form.setFieldsValue({csdcdm: '', csdxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'city', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'city', [])
      }
      this.$set(this.selectMenu, 'area', [])
    },
    cityChange (v) {
      this.form.setFieldsValue({csdxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'area', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'area', [])
      }
    },
    zjlxChang(value){
      console.log(value)
      if(value != '1'){
        this.pattern = RegExp()
      }else{
        this.pattern = RegExp(/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)
      }
    },
    zjhmChange(v){
      let sfzjlxm = this.form.getFieldValue('sfzjlxm');
      const {value} = v.target;
      console.log(121212)

      if("1" === sfzjlxm && value && (value.length === 15 || value.length === 18)){//居民省份证
        console.log(this.getBirthdatByIdNo(value))
        this.form.setFieldsValue({"csrq":moment(this.getBirthdatByIdNo(value), 'YYYY-MM-DD')});
      }
    },
    getBirthdatByIdNo(iIdNo) {
      let tmpStr = "";
      iIdNo = iIdNo.replace(/^\s+|\s+$/g, "");
      if (iIdNo.length == 15) {
        tmpStr = iIdNo.substring(6, 12);
        tmpStr = "19" + tmpStr;
        tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6);
        return tmpStr;
      }else{
        tmpStr = iIdNo.substring(6, 14);
        tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6);
        return tmpStr;
      }
    },
    zzmmChange (v) {
      this.info.zzmmm = v
      this.$emit('update:info', this.info)
    },
    provinceNativeChange (v) {
      this.form.setFieldsValue({jgcdm: '', jgxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'ncity', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'ncity', [])
      }
      this.$set(this.selectMenu, 'narea', [])
    },
    cityNativeChange (v) {
      this.form.setFieldsValue({jgxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'narea', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'narea', [])
      }
    },
    dateChang(data){
      if(new Date(this.form.getFieldsValue().rxny).getTime() > new Date(data).getTime()){
        this.$message.error('拟毕业时间不能小于入学时间')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  /*.col-wrapper .ant-col-sm-12, .ant-col-md-8{*/
    /*min-height: 91px;*/
  /*}*/
</style>
